<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>用 jQuery 重写选项卡</title>
    <style>
        .tab-strip {
            background-color: #e4e2d5;
            padding: 3px;
            height: 22px;
        }

        .tab-strip div {
            float: left;
            font: 14px arial;
            cursor: pointer;
        }

        .tab-strip-tab {
            padding: 3px;
        }

        .tab-strip-tab:hover {
            border: thin solid #316ac5;
            background-color: #c1d2ee;
            padding: 2px;
        }

        .tab-strip-click {
            border: thin solid #facc5a;
            background-color: #f9e391;
            padding: 2px;
        }
    </style>
</head>
<body>
<div class="tab-strip">
    <div class="tab-strip-tab" data-tab-number="1">Tab 1</div>
    <div class="tab-strip-tab" data-tab-number="2">Tab 2</div>
    <div class="tab-strip-tab" data-tab-number="3">Tab 3</div>
</div>
<div id="description-container"></div>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    function handleEvent(e) {
        var target = $(e.target);
        var type = e.type;
        if (type == 'click') {
            target.addClass('tab-strip-click');
            var number = target.attr('data-tab-number');
            showDescription(number);
        }
    }

    function showDescription(number) {
        var text = 'Descriptipn for Tab ' + number;
        $('#description-container').text(text);
    }

    $('.tab-strip > div').on('click', handleEvent);
</script>
</body>
</html>